customElements.define(
    'wc-button-submit',
    class ButtonElement extends HTMLElement {
        constructor() {
            super();
           
        }
        connectedCallback() {
            this.update(); // 调用 update 方法来应用参数
        }
        // 更新内容的方法
        update() {
            const name = this.getAttribute('name') || 'World';
            // 创建模板内容
            const template = this.getTemplate(name);
            // 创建 Shadow DOM
            const shadow = this.attachShadow({ mode: 'open' });
            // 克隆模板内容并添加到 Shadow DOM
            const templateContent = template.content.cloneNode(true);
            shadow.appendChild(templateContent);
            const button = shadow.querySelector('button'); // 获取内部的button元素
            button.addEventListener('click', () => {
                alert('Button clicked!'); // 添加点击事件处理函数
            });
        }
        getTemplate(name) {
            const template = document.createElement('template');
            template.innerHTML =
                `   <style>
                    button {
                        background-color: #4CAF50;
                        border: none;
                        color: white;
                        padding: 15px 32px;
                        text-align: center;
                        text-decoration: none;
                        display: inline-block;
                        font-size: 16px;
                        margin: 4px 2px;
                        cursor: pointer;
                    }
                </style>
                <button type="submit" class="button-login">
                    <span><slot></slot></span>
                </button>
            `;
            return template;
        }

    }
);
